<template>
    <div class="app-container">
      <div id="chooseDate">
        <div class="block">
          <span class="demonstration">开始日期</span>
          <el-date-picker
            v-model="begin"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </div>
        <div class="block">
          <span class="demonstration">结束日期</span>
          <el-date-picker
            v-model="end"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期">
          </el-date-picker>

        </div>
        <el-button type="primary" @click="generate">生成图表</el-button>
      </div>
      <div id="main" style="width: 1500px;height:700px;"></div>
    </div>
</template>

<script>
  import statistics from '@/api/statistics'
    export default {
        name: "index",
      data(){
          return{
            begin:'',//开始日期
            end:'',//截至日期
          }
      },
      methods:{
          //生成图表
        generate(){
          statistics.generateStatistics(this.begin,this.end)
            .then(response=>{
              var echarts = require('echarts');



              var myChart = echarts.init(document.getElementById('main'));

              var option = {
                title: {
                  text: '教育统计图表'
                },
                tooltip: {
                  trigger: 'axis'
                },
                legend: {
                  data: ['注册人数', '登录人数', '每日播放视频数', '每日新增课程数']
                },
                grid: {
                  left: '3%',
                  right: '4%',
                  bottom: '3%',
                  containLabel: true
                },
                toolbox: {
                  feature: {
                    saveAsImage: {}
                  }
                },
                xAxis: {
                  type: 'category',
                  boundaryGap: false,
                  data: response.data.dateList
                },
                yAxis: {
                  type: 'value'
                },
                series: [
                  {
                    name: '注册人数',
                    type: 'line',
                    stack: '总量',
                    data: response.data.registerList
                  },
                  {
                    name: '登录人数',
                    type: 'line',
                    stack: '总量',
                    data: response.data.loginList
                  },
                  {
                    name: '每日播放视频数',
                    type: 'line',
                    stack: '总量',
                    data: response.data.videoplayList
                  },
                  {
                    name: '每日新增课程数',
                    type: 'line',
                    stack: '总量',
                    data: response.data.newCourseList
                  },

                ]

              };

              // 使用刚指定的配置项和数据显示图表。
              myChart.setOption(option);
            })

        },

      }
    }
</script>

<style scoped>
#chooseDate .block{
  display: inline-block;
  margin-right: 40px;
}
</style>
